<template>
  <transition name="message-fade" @before-leave="beforeClose" @after-leave="$emit('destroy')">
    <div v-show="visible"
         :class="wrapClasses"
         :style="customStyle">
      {{ message }}
    </div>
  </transition>
</template>

<script lang="ts">
const prefixCls = 'message'
import {defineComponent ,ref ,computed ,onMounted} from 'vue'
export default defineComponent({
  name: "bbq-message",
  props:{
    message: {
      type: String,
      default: 'info',
    },
    type: {
      type: String,
      default: 'info'
    },
    offset: {
      type: Number, default: 20
    },
    id:{
      type: Number, default: 0
    },
    beforeClose: {
      type: Function,
      required: true,
    },
  },
  emits: ['destroy'], //毁灭
  setup(prop,context){
    const visible = ref(false)
    let timer = null

    const wrapClasses = computed(() => {
      return[
        `${prefixCls}`,`${prefixCls}-${prop.type}`
      ]
    })
    const customStyle = computed(() => {
      return {
        top: `${prop.offset}px`,
      }
    })

    function close() {
      visible.value = false
    }

    timer = setTimeout(() => {
      if (visible.value) {
        close()
      }
    },2000)

    onMounted(() => {
      visible.value = true
    })

    return {
      visible,
      wrapClasses,
      customStyle
    }


  }
})
</script>